<script setup lang="ts">
import {onBeforeUnmount, onMounted, ref} from 'vue'
import keymaster from 'keymaster'
import {useRoute, useRouter} from 'vue-router'

const routePathArray = ['movie', 'hot']

const showNavBar = ref(false)
onMounted(() => {
  keymaster('q', function () {
    showNavBar.value = !showNavBar.value
    return false
  })
})
onBeforeUnmount(() => {
  keymaster.unbind('q')
})

const route = useRoute()
const activeRoute = ref()
if (route.path === '/') {
  activeRoute.value = routePathArray[1]
} else {
  activeRoute.value = route.path.replace('/', '')
}

const router = useRouter()
function routeChange(value: string) {
  router.push(value)
  showNavBar.value = false
}
</script>

<template>
  <div class="app-header-nav" v-if="showNavBar">
    <el-radio-group v-model="activeRoute" @change="routeChange">
      <el-radio-button v-for="routePath in routePathArray" :key="routePath" :value="routePath">
        {{ routePath }}
      </el-radio-button>
    </el-radio-group>
  </div>
</template>

<style scoped lang="stylus">
.app-header-nav {
  background-color #fff
  position fixed
  left 720px
  top 0
  z-index: 1
}
</style>